<template>

    <div id="app">
       <el-button  class="fu" type="info" @click="addHandler">新增</el-button>

<el-dialog title="新增栏目" :visible.sync="dialogFormVisible">
  <el-form :model="form">   
      <!-- <el-form-item label="栏目名称" :label-width="formLabelWidth"> -->
    <el-form-item  label="栏目名称"  :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="父栏目" :label-width="formLabelWidth">
      <el-select v-model="form.parentId	" placeholder="请选择父栏目">
        <el-option
            v-for="item in arr"
            :key="item.id"
            :label="item.name"
            :value="item.id">
    </el-option>
      </el-select>
    </el-form-item>

     <el-form-item label="序号" :label-width="formLabelWidth">
      <el-input v-model="form.no" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="栏目介绍" :label-width="formLabelWidth">
     <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.description" ></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button  type="info" @click="dialogFormVisible= false" class="quxiao">取 消</el-button>
    <el-button type="info" @click="submit" class="queding">确 定</el-button>
  </div>
</el-dialog>





         <el-table  :data="arr" style="width: 100%">
              <el-table-column   prop="id"  label="序号"  width="180"></el-table-column>
              <el-table-column  prop="name" label="栏目名称" width="180"></el-table-column>
              <el-table-column prop="description" label="描述信息"></el-table-column>
              <el-table-column   prop="parentId"  label="父栏目"></el-table-column>                          
              <el-table-column  fixed="right"  label="操作"  width="270">                 
              <template slot-scope="scope">
                    <el-button  @click="editHandle(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button  @click="deleteHandler(scope.row.id)" type="danger" size="small">删除</el-button>
                 </template>
            </el-table-column>
        </el-table>

       
    </div>  
     

     

</template>

<script>
import houtai from '../../utils/request.js'
import qs from 'querystring'
export default {
    data(){
        return{
            arr: [ ],
            //存放数据
          

            
        dialogFormVisible: false,
        form: {
         
        },
        formLabelWidth: '120px',
         textarea: ''
           
        }
    },
    methods:{
          //存放方法
          //查询所有资讯
          findall(){
              houtai.get("/category/findAll").then(responce=>{
                  //打印response
                  console.log(responce);
                  this.arr = responce.data
              })
             
          },
          deleteHandler(id){
              alert("确定要删除该内容吗？")
               houtai.get("/category/deleteById?id="+id).then(responce=>{
                  //打印response               
                   this.findall()
              })
          },
          editHandle(row){
          this.dialogFormVisible = true
          this.form = row
          },

          //添加方法
          submit(){
              houtai.post('/category/saveOrUpdate',qs.stringify(this.form)).then(res=>{
                  if(res.status === 200){
                      this.dialogFormVisible = false
                        _this.findall();
                        this.form ={};
                      this.findall()
                  }
              })
          },
          addHandler(){
              this.form = {}
              this.dialogFormVisible = true
          }
      },
      
      
      created(){
          //使用方法
          this.findall()
      }
}


</script>

<style>
.fu {
    background-color: #2cb5ac;
    font-size: 14px;
    padding: 0.5em;
}

.queding {
     background-color: #2cb5ac;
    font-size: 14px;
    padding: 0.5em;
}

.quxiao {
     background-color: #f3f3f9;
    font-size: 14px;
    padding: 0.5em;
    color: #666;
}
</style>
